<template>
  <div class="yszqb">
    <div class="yszqb-title">元素周期表</div>
    <div class="yszqb-tip">
      <div v-for="(x, y) in tips" :style="{ background: tips[y].color }">
        {{ x.title }}
      </div>
    </div>
    <div class="yxzqb-top">
      <template v-for="(x, y) in elements" :key="y">
        <div v-if="y < 56" :style="{ background: tips[x.type - 1].color }">
          <div>
            <div> {{ y + 1 }}</div>
            <div> {{ x.name }}</div>
          </div>
          <div>{{ x.title }}</div>
          <div>{{ x.weight }}</div>
        </div>
        <div v-else-if="y == 57" style="background-color: #FEFE9E;">
          <div>57-71</div>
          <div>镧系</div>
          <div>La - Lu</div>
        </div>
        <div v-else-if="y >= 71 && y < 88" :style="{ background: tips[x.type - 1].color }">
          <div> {{ y + 1 }}</div>
          <div>{{ x.title }}</div>
          <div>{{ x.weight }}</div>
        </div>
        <div v-else-if="y == 89" style="background-color: #FEFE9E;">
          <div>89-103</div>
          <div>锕系</div>
          <div>Ac - Lf</div>
        </div>
        <div v-else-if="y >= 103 && y < 118" :style="{ background: tips[x.type - 1].color }">
          <div> {{ y + 1 }}</div>
          <div>{{ x.title }}</div>
          <div>{{ x.weight }}</div>
        </div>
      </template>
    </div>
    <div class="yxzqb-bottom">
      <div class="center" style="background-color: #FFBFA3;">
        镧系
      </div>
      <div v-for="(x, y) in lanxi" :key="y" :style="{ background: tips[x.type - 1].color }">
        <div>
          <div> {{ y + 57 }}</div>
          <div> {{ x.name }}</div>
        </div>
        <div>{{ x.title }}</div>
        <div>{{ x.weight }}</div>
      </div>
    </div>
    <div class="yxzqb-bottom">
      <div class="center" style="background-color: #FEE0BE;">
        锕系
      </div>
      <div v-for="(x, y) in axi" :key="y" :style="{ background: tips[x.type - 1].color }">
        <div>
          <div> {{ y + 89 }}</div>
          <div> {{ x.name }}</div>
        </div>
        <div>{{ x.title }}</div>
        <div>{{ x.weight }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { queryData } from '@/apis/mysql'
const elements = ref([])
const lanxi = ref([])
const axi = ref([])
const colors = [
  '#FCA1A0',
  '#FFBC61',
  '#FFBFA3',
  '#FEE0BE',
  '#FEFE9E',
  '#64E36E',
  '#7EFF88',
  '#9EFEFD',
  '#B8B8FE',
  '#FCB9FE'
]
const tips = [
  {title: '碱金属', color: '#FCA1A0'},
  {title: '碱土金属', color: '#FFBC61'},
  {title: '镧系金属', color: '#FFBFA3'},
  {title: '锕系金属', color: '#FEE0BE'},
  {title: '过渡元素', color: '#FEFE9E'},
  {title: '主族金属', color: '#64E36E'},
  {title: '类金属', color: '#7EFF88'},
  {title: '非金属', color: '#9EFEFD'},
  {title: '卤素', color: '#B8B8FE'},
  {title: '稀有气体', color: '#FCB9FE'},
]
onMounted(() => {
  const arr1 = []
  const arr2 = []
  queryData({
    table: 'elements',
    query: {
      page: 1,
      show: 120
    }
  }).then(res => {
    elements.value = res.data
    res.data.map((x, y) => {
      if (y > 55 && y < 71) {
        arr1.push(x)
      }

      if (y > 87 && y < 103) {
        arr2.push(x)
      }
    })
    lanxi.value = arr1
    axi.value = arr2
  })
})
</script>
<style scoped lang="scss">
.yszqb {
  width: 1156px;
  position: relative;
  padding: 20px;
  background-color: #FFFCDE;
  margin: 10px;

  .yszqb-title {
    position: absolute;
    color: #000;
    width: 100%;
    text-align: center;
  }
  .yszqb-tip{
    width: 610px;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    top: 80px;
    left: 180px;
    >div{
      width: 100px;
      height: 60px;
      margin: 1px;
      color: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #000;
    }
  }

  .yxzqb-top {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;

    >div {
      width: 60px;
      height: 80px;
      border: 1px solid #000;
      margin: 1px;
      padding: 5px 0;
      color: #000;

      >div {
        height: 25%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      >div:first-child {
        display: flex;

        >div {
          width: 50%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      >div:nth-child(2) {
        height: 50%;
      }
    }

    >div:nth-child(1) {
      margin-right: 992px;
    }

    >div:nth-child(4) {
      margin-right: 621px;
    }

    >div:nth-child(12) {
      margin-right: 621px;
    }

    .type1 {
      background-color: #39e8ff;
      color: red;
    }

    .type2 {
      background-color: #de72ff;
      color: red;
    }

    .type3 {
      background-color: #ffe48bda;
      color: red;
    }

    .type4 {
      background-color: #3bf884da;
      color: red;
    }
  }

  .yxzqb-bottom {
    width: 992px;
    display: flex;
    flex-wrap: wrap;
    margin: 2px auto;

    .center {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    >div {
      width: 60px;
      height: 80px;
      border: 1px solid #000;
      margin: 1px;
      padding: 5px 0;
      color: #000;

      >div {
        height: 25%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      >div:first-child {
        display: flex;

        >div {
          width: 50%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      >div:nth-child(2) {
        height: 50%;
      }
    }
  }
}
</style>
